<template>
  <div class="p">
    <div class="main">
      <img src="@/assets/cool-background.png" alt="">
      <div class="loginfrom">
        <p class="p1">书城后台</p>
        <div class="p2">
          <span>账号密码登录</span>
        </div>
        <div style="margin-top:30px">
          <el-input clearable validate-event placeholder="用户名：super@a.com" prefix-icon="el-icon-user" v-model="input2">
          </el-input>
          <el-input style="margin-top:20px;" prefix-icon="el-icon-lock" placeholder="密码：123123" v-model="input" show-password></el-input>
        </div>
        <el-button @click="login" type="primary" style="margin-top:20px;width:100%" :loading="loading">提交</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import Bus from '@/components/eventBus'
export default {
  name: 'login',
  data() {
    return {
      input: '',
      input2: '',
      loading: false
    }
  },
  created() {
    Bus.$emit('login1', false)
  },
  methods: {
    login() {
      let pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (this.input == '' || this.input2 == '') {
        this.$message({
          message: '请输入邮箱或者密码哟',
          type: 'warning'
        })
      } else {
        if (!pattern.test(this.input2)) {
          this.$message.error('请求参数错误 [ 邮箱 不是一个合法的邮箱。密码 至少为 6 个字符。 ]')
        } else {
          if (this.input.toString().length < 6) {
            this.$message.error('请求参数错误 [ 密码 至少为 6 个字符。 ]')
          } else {
            this.$store.dispatch('getlogin', { email: this.input2, password: this.input })
            this.loading = true
            setTimeout(() => {
              let token = localStorage.getItem('shuchotaitoken')

              if (token) {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                })
                this.$router.push('/home')
              }
            }, 2000)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.p {
  .main {
    text-align: center;
    img {
      position: relative;
      width: 100vw;
      height: 99.5vh;
    }
    .loginfrom {
      position: absolute;
      width: 300px;
      height: 500px;
      padding: auto;
      top: 0;
      left: 42%;

      .p1 {
        color: #fff;
        font-size: 40px;
        font-weight: 800;
      }
      .p2 {
        margin-top: 100px;
        span {
          color: rgb(66, 63, 230);
          font-size: 20px;
          // padding-bottom: 10px;

          border-bottom: 2px solid rgb(123, 122, 231);
        }
        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>